<html>
<head>
</head>
<div id="chartContainer">
    <script src="./lib/d3.v4.3.0.js"></script>
    <script src="./dist/dimple.v2.3.0.js"></script>
    <script type="text/javascript">
        var svg = dimple.newSvg("#chartContainer", 590, 400);
        d3.tsv("./data/example_data.tsv", function (data) {
            var myChart = new dimple.chart(svg, data);
            myChart.setBounds(20, 20, 460, 360);
            myChart.addMeasureAxis("p", "Unit Sales");

            // 添加第一个分组，用于“Price Tier”
            var priceTierGroup = myChart.addSeries("Price Tier", dimple.plot.pie);
            priceTierGroup.innerRadius = "50%";
            priceTierGroup.addOrderRule("Price Tier");

            // 添加第二个分组，用于“Category”，注意 offset 参数来使得两个分组串行显示
            var categoryGroup = myChart.addSeries("Category", dimple.plot.pie);
            categoryGroup.innerRadius = "40%";
            categoryGroup.addOrderRule("Category");
            categoryGroup.barGap = 0.1;
            categoryGroup.barGap = 0;

            myChart.addLegend(500, 20, 90, 300, "left");
            myChart.draw();
        });
    </script>
</div>
</html>
